<template>
  <Basic>
    <!-- 关于我们 -->
    <div class="w about_us">
      <div class="about_us_continer">
        <div class="about_inner">
          <div class="about_title">关于我们</div>
          <div class="about_body">
            现在我们有多年培养萌宠经验，我们爱宠物的每一部分我们的工作！我们为您的宠物提供一个非常热情友好的环境。我们的专业团队确保您的宠物总是较高水平的护理，因为我们对所有的宠物就像自己的一家人一样。
          </div>
          <div class="about_button"><a>查看更多</a></div>
        </div>
        <div class="about_img">
          <img src="../../../src/assets/img/image1.jpg" alt="" />
        </div>
      </div>
    </div>
    <!-- 内容介绍 -->
    <div class="full">
      <div class="full_continer w">
        <div class="full_inner">
          <div class="full_inner_item">
            <div class="full_inner_image">
              <img src="../../../src/assets/img/icon1.png" alt="" />
            </div>
            <div class="full_inner_novel">
              <div>宠物美容师</div>
              <div>
                我们的专业团队提供特殊的美容服务，宠物美容对宠物的健康大有益处
              </div>
            </div>
          </div>
          <div class="full_inner_item">
            <div class="full_inner_image">
              <img src="../../../src/assets/img/icon2.png" alt="" />
            </div>
            <div class="full_inner_novel">
              <div>贵宾服务</div>
              <div>
                给您的宠物个性化服务，提供宠物用品；猫、狗洁净用品；其他小动物附属用品
              </div>
            </div>
          </div>
          <div class="full_inner_item">
            <div class="full_inner_image">
              <img src="../../../src/assets/img/icon3.png" alt="" />
            </div>
            <div class="full_inner_novel">
              <div>我们爱每一个宠物</div>
              <div>
                它们不仅仅是宠物更是家人，我们还有专业团体，包括兽科技术员，兽医助理和接待员
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务介绍 -->
    <div class="service">
      <div class="part_title">我们的服务</div>
      <div class="part_decoration">
        <img src="../../../src/assets/img/xhx_01.jpg" alt="" />
      </div>
      <div class="service_continer w">
        <div class="service_inner">
          <div class="service_inner_parent">
            <div class="si_div1">
              <div class="si_div_continer1">
                <div>
                  全面梳理美容<img
                    src="../../../src/assets/img/icon1.png"
                    alt=""
                  />
                </div>
                <div>
                  你的宠物与我们在可靠的人手中，让你的宠物喜欢的放心的保健中心。
                </div>
              </div>
            </div>
            <div class="si_div2">
              <div class="si_div_continer1">
                <div>
                  宠物清洗<img src="../../../src/assets/img/icon3.png" alt="" />
                </div>
                <div>
                  我们使用一个不同的洗发水沐浴露根据不同类型和品种来清洗。
                </div>
              </div>
            </div>
            <div class="si_div3">
              <img src="../../../src/assets/img/image2.jpg" alt="" />
            </div>
            <div class="si_div4">
              <div class="si_div_continer2">
                <div>
                  <img src="../../../src/assets/img/icon3.png" alt="" />宠物造型
                </div>
                <div>我们的团队的宠物发型师很乐意让你的动物看起来很快乐。</div>
              </div>
            </div>
            <div class="si_div5">
              <div class="si_div_continer2">
                <div>
                  <img src="../../../src/assets/img/icon3.png" alt="" />宠物医疗
                </div>
                <div>
                  专业团体，包括兽科技术员，兽医助理和接待员．全部受过处理急症所需要的训练。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 萌宠图片 -->
    <div class="animal_picture">
      <div class="animal_continer">
        <div class="animal_picture_parent">
          <div class="ap_div1">
            <img src="../../../src/assets/img/zp2_05.jpg" alt="" />
          </div>
          <div class="ap_div2">
            <img src="../../../src/assets/img/zp3_09.jpg" alt="" />
          </div>
          <div class="ap_div3">
            <img src="../../../src/assets/img/zp5_07.jpg" alt="" />
          </div>
          <div class="ap_div4">
            <img src="../../../src/assets/img/zp6_03.jpg" alt="" />
          </div>
          <div class="ap_div5">
            <img src="../../../src/assets/img/zp7_03.jpg" alt="" />
          </div>
          <div class="ap_div6">
            <img src="../../../src/assets/img/zp8_03.jpg" alt="" />
          </div>
          <div class="ap_div7">
            <img src="../../../src/assets/img/xgou.jpg" alt="" />
          </div>
          <div class="ap_div8">
            <img src="../../../src/assets/img/news4.jpg" alt="" />
          </div>
          <div class="ap_div9">
            <img src="../../../src/assets/img/news3.jpg" alt="" />
          </div>
          <div class="ap_div10">
            <img src="../../../src/assets/img/news1.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 产品中心 -->
    <div class="produc_center">
      <div class="part_title">产品中心</div>
      <div class="part_decoration">
        <img src="../../../src/assets/img/xhx_01.jpg" alt="" />
      </div>
      <div class="produc_center_continer">
        <div class="produc_center_item w">
          <div class="pc_parent">
            <div class="pc_div1">
              <img src="../../../src/assets/img/96_ba8i.png" alt="" />
              <div>职业夹克装</div>
            </div>
            <div class="pc_div2">
              <img src="../../../src/assets/img/86_mcj8.png" alt="" />
              <div>鳄鱼纹宠物项圈</div>
            </div>
            <div class="pc_div3">
              <img src="../../../src/assets/img/88_qo13.png" alt="" />
              <div>金属镶钻宠物项圈</div>
            </div>
            <div class="pc_div4">
              <img src="../../../src/assets/img/87_kefk.png" alt="" />
              <div>泡棉拉宠物胸背带</div>
            </div>
            <div class="pc_div5">
              <img src="../../../src/assets/img/89_9k3a.png" alt="" />
              <div>玫红色狗狗项圈</div>
            </div>
            <div class="pc_div6">
              <img src="../../../src/assets/img/90_fsq6.png" alt="" />
              <div>金属镶钻宠物项圈</div>
            </div>
            <div class="pc_div7">
              <img src="../../../src/assets/img/91_bfvn.png" alt="" />
              <div>涤纶反光牵引胸背带</div>
            </div>
            <div class="pc_div8">
              <img src="../../../src/assets/img/92_72g1.png" alt="" />
              <div>皮质牵引套装</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 用户反馈 -->
    <div class="feedback">
      <div class="w feedback_block">
        <div class="feedback_item">
          <img src="../../../src/assets/img/xiaotu.png" alt="" />
          <div>
            <h5>上海李小姐：</h5>
            <div>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我们家的狗狗（嘟嘟）得了犬瘟。听朋友们说宠物看病一定要去大一点的宠物医院去看病，前三天是一家，后四天又换了一家。主要是因为疗效不行才换的。那里不错。我也是抱着试试的态度去看看，死马当活马医吧<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;医院不太大，卫生**是可以的,基本闻不到动物的BB味。我就接受了一位姓吕的老大夫的建议,治疗了几天,现在恢复的很好,基本康复了,太感谢吕医生了！
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 专家团队 -->
    <div class="master_team">
      <div class="part_title_dark">专家团队</div>
      <div class="part_decoration_dark">
        <img src="../../../src/assets/img/xhx2_03.jpg" alt="" />
      </div>
      <div class="master_team_continer w">
        <div class="master_team_item">
          <img src="../../../src/assets/img/td1.jpg" alt="" />
          <h5>成医生</h5>
          <div>3年宠物医生经验</div>
        </div>
        <div class="master_team_item">
          <img src="../../../src/assets/img/td2.jpg" alt="" />
          <h5>李医生</h5>
          <div>5年宠物医生经验</div>
        </div>
        <div class="master_team_item">
          <img src="../../../src/assets/img/td3.jpg" alt="" />
          <h5>许医生</h5>
          <div>8年宠物医生经验</div>
        </div>
      </div>
      <div class="about_button mt_btn"><a>查看更多</a></div>
    </div>
    <!--  新闻中心 -->
    <div class="news_center">
      <div class="part_title">新闻中心</div>
      <div class="part_decoration">
        <img src="../../../src/assets/img/xhx_01.jpg" alt="" />
      </div>
      <div class="news_center_continer w">
        <div class="news_center_item">
          <img src="../../../src/assets/img/news6.jpg" alt="" />
          <h5>注意青春期血压</h5>
          <div>2014-10-08</div>
          <div>
            当人进入青春发育期，也就是十三、四岁时，其血压已开始接近成年人，如处于安静状态时，血压高于140/90毫米汞柱，就可以认为是血压偏高，被认为青春期......
          </div>
        </div>
        <div class="news_center_item">
          <img src="../../../src/assets/img/news4.jpg" alt="" />
          <h5>正确使用电子血压计应注意哪些问题</h5>
          <div>2014-10-08</div>
          <div>
            一是每个人的血压在一天之内的变化很大。严格来说，人每一时刻的血压是不一样的，它是随着人的心理状态、时间、季节、气温的变化以及测量的部位（臂或腕）、体位（坐或卧）....../90毫米汞柱，就可以认为是血压偏高，被认为青春期......
          </div>
        </div>
        <div class="news_center_item">
          <img src="../../../src/assets/img/news2.jpg" alt="" />
          <h5>看不懂的化验单</h5>
          <div>2014-10-08</div>
          <div>
            当人进入青春发育期，也就是十三、四岁时，其血压已开始接近成年人，如处于安静状态时，血压高于140/随着医学技术的发展，在医疗过程中进行的化验项目越来越多，它对诊断疾病起着重要的作用。因此，无论是医生还是患者，对于化验结果都很重视。　......
          </div>
        </div>
      </div>
    </div>
  </Basic>
</template>

<script setup>
  import Basic from "@components/Basic/Basic.vue";
</script>

<style>
  /* 关于我们 */
  .about_us {
    height: 550px;
    background-color: #ffffff;
    margin: 0 auto;
    position: relative;
  }

  .about_us_continer {
    position: absolute;
    top: 50%;
    margin-top: calc(-390px / 2);
    height: 390px;
    width: 1192px;
  }

  .about_inner {
    float: left;
    width: 510px;
    height: 390px;
    overflow: hidden;
  }

  .about_title {
    font-size: 30px;
  }

  .about_body {
    font-size: 13px;
    margin-top: 20px;
    line-height: 30px;
  }

  .about_button {
    margin-top: 62px;
    height: 46px;
    width: 140px;
    background-color: #f6ab4a;
    line-height: 46px;
    text-align: center;
    border-radius: 30px;
    color: #ffffff;
    cursor: pointer;
  }

  .about_button:hover {
    background-color: #ff8622;
  }

  .about_img {
    float: right;
  }

  .about_img img {
    width: 582px;
    height: 390px;
  }

  /* 内容介绍 */
  .full {
    height: 360px;
    background-image: url("@assets/img/background.jpg");
  }

  .full_continer {
    margin: 0 auto;
    height: 360px;
    position: relative;
  }

  .full_inner {
    height: 100px;
    width: 1200px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 25px;
  }

  .full_inner_image img {
    width: 100px;
    height: 100px;
    float: left;
  }

  .full_inner_novel {
    float: left;
    margin-top: 6px;
    margin-left: 10px;
    width: 270px;
    color: #ffffff;
    float: left;
  }

  .full_inner_novel div:first-child {
    font-size: 20px;
  }

  .full_inner_novel div:last-child {
    margin-top: 18px;
    font-size: 14px;
  }

  /* 服务介绍 */
  .service {
    height: 750px;
    overflow: hidden;
  }
  /* 区域标题样式 */
  .part_title {
    text-align: center;
    font-size: 36px;
    margin-top: 81px;
    padding-bottom: 8px;
  }

  .part_decoration {
    margin: 0 auto;
    position: relative;
  }

  .part_decoration img {
    position: absolute;
    left: 50%;
    margin-left: -125px;
    /* margin-top: 17px; */
    width: 250px;
    height: 15px;
  }

  .service_continer {
    margin: 0 auto;
    margin-top: 25px;
    overflow: hidden;
  }

  /* grid布局 */
  .service_inner_parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
  }

  .si_div1 {
    grid-area: 1 / 1 / 2 / 2;
    text-align: right;
    position: relative;
  }

  /* 左栏布局 */
  .si_div_continer1 {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    right: 0;
  }

  .si_div_continer1 div:first-child {
    width: 300px;
    font-size: 24px;
    text-align: right;
    line-height: 46px;
  }

  .si_div_continer1 img {
    width: 46px;
    height: 46px;
    margin-left: 20px;
    /* float: right; */
  }

  .si_div_continer1 div:last-child {
    margin-top: 6px;
    font-size: 14px;
    width: 300px;
    /* float: right; */
  }

  .si_div2 {
    grid-area: 2 / 1 / 3 / 2;
    text-align: right;
    position: relative;
  }

  /* 中间宠物图片 */
  .si_div3 {
    grid-area: 1 / 2 / 3 / 3;
    /* width: 323px; */
    height: 450px;
  }

  .si_div3 img {
    /* display: block; */
    /* align-items: center; */
    position: absolute;
    left: 50%;
    margin-left: calc(-323px / 2);
  }

  /* 右栏布局 */
  .si_div_continer2 {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 0;
  }

  .si_div_continer2 div:first-child {
    width: 300px;
    text-align: left;
    line-height: 46px;
    font-size: 24px;
  }

  .si_div_continer2 img {
    width: 46px;
    height: 46px;
    margin-right: 20px;
  }

  .si_div_continer2 div:last-child {
    margin-top: 6px;
    font-size: 14px;
    width: 300px;
    text-align: left;
  }

  .si_div4 {
    grid-area: 1 / 3 / 2 / 4;
    text-align: right;
    position: relative;
  }

  .si_div5 {
    grid-area: 2 / 3 / 3 / 4;
    text-align: right;
    position: relative;
  }

  /* 萌宠图片 */
  .animal_picture {
    width: 100%;
    height: 100%;
  }
  .animal_continer {
    margin: 0 auto;
    height: 780px;
  }
  .animal_picture_parent {
    /* border: 1px solid red; */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 60px;
    grid-row-gap: 8px;
  }
  .animal_picture_parent img {
    width: 354px;
    height: 386px;
  }
  .ap_div1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .ap_div2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  .ap_div3 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .ap_div4 {
    grid-area: 2 / 2 / 3 / 3;
  }
  .ap_div5 {
    grid-area: 1 / 3 / 2 / 4;
  }
  .ap_div6 {
    grid-area: 2 / 3 / 3 / 4;
  }
  .ap_div7 {
    grid-area: 1 / 4 / 2 / 5;
  }
  .ap_div8 {
    grid-area: 2 / 4 / 3 / 5;
  }
  .ap_div9 {
    grid-area: 1 / 5 / 2 / 6;
  }
  .ap_div10 {
    grid-area: 2 / 5 / 3 / 6;
  }

  /* 产品中心 */
  .produc_center {
    height: 900px;
    padding: 30px;
    overflow: hidden;
    /* width: 284px; */
    /* height: 272px; */
  }
  .produc_center_continer {
    position: relative;
    overflow: hidden;
  }
  .produc_center_item {
    padding-top: 56px;
    margin: 0 auto;
  }
  .pc_parent {
    display: grid;
    grid-template-columns: repeat(4, 284px);
    grid-template-rows: repeat(2, 272px);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .pc_parent > div:hover {
    border: 1px solid #f6ab4a;
  }
  .pc_parent div div {
    text-align: center;
  }
  .pc_parent img {
    width: 230px;
    height: 220px;
    display: block;
    margin: 0 auto;
  }
  .pc_div1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .pc_div2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  .pc_div3 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .pc_div4 {
    grid-area: 2 / 2 / 3 / 3;
  }
  .pc_div5 {
    grid-area: 1 / 3 / 2 / 4;
  }
  .pc_div6 {
    grid-area: 2 / 3 / 3 / 4;
  }
  .pc_div7 {
    grid-area: 1 / 4 / 2 / 5;
  }
  .pc_div8 {
    grid-area: 2 / 4 / 3 / 5;
  }

  /* 用户反馈 */
  .feedback {
    /* width: 1200px; */
    background-image: url("@assets/img/background-4.jpg");
    /* background-position: center; */
    /* margin: 0 auto; */
    /* background-size: contain; */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
  }
  .feedback_block {
    height: 500px;
    margin: 0 auto;
    left: 0;
    position: relative;
    border-bottom: 1px solid #382829;
  }
  .feedback_item {
    width: 600px;
    height: 320px;
    background-color: #f7f3e7;
    position: absolute;
    top: 50%;
    margin-top: calc(-320px / 2);
    border-radius: 3px;
  }
  .feedback_item img {
    width: 125px;
    height: 125px;
    float: left;
    /* top: 50%; */
    margin-top: 120px;
    margin-left: 15px;
  }
  .feedback_item > div {
    width: 390px;
    height: 162px;
    overflow: hidden;
    float: right;
    margin-top: 80px;
    margin-right: 40px;
    padding-right: 3px;
    overflow-y: auto;
  }

  .feedback_item h5 {
    font-size: 18px;
  }
  .feedback_item > div > div {
    font-size: 12px;
    line-height: 24px;
  }

  /* 专家团队 */
  .master_team {
    height: 710px;
    background-image: url("@assets/img/background.jpg");
    overflow: hidden;
  }
  /* 暗色区域标题 */
  .part_title_dark {
    text-align: center;
    font-size: 36px;
    margin-top: 81px;
    padding-bottom: 8px;
    color: #ffffff;
  }

  .part_decoration_dark {
    margin: 0 auto;
    position: relative;
  }

  .part_decoration_dark img {
    position: absolute;
    left: 50%;
    margin-left: -125px;
    /* margin-top: 17px; */
    width: 250px;
    height: 15px;
    /* border: 1px solid rebeccapurple; */
  }
  .master_team_continer {
    margin: 0 auto;
  }
  .master_team_item img {
    width: 350px;
    height: 262px;
  }
  .master_team_continer {
    margin-top: 58px;
    display: flex;
    justify-content: space-between;
  }
  .master_team_item {
    width: 350px;
  }
  .master_team_item div {
    text-align: center;
  }
  .master_team_item h5 {
    text-align: center;
    font-size: 20px;
    line-height: 16px;
    margin-top: 16px;
    color: #ffffff;
  }
  .master_team_item div {
    font-size: 13px;
    color: #cccc;
    padding: 18px 0;
  }
  .mt_btn {
    margin: 0 auto;
    margin-top: 50px;
  }

  /* 新闻中心 */
  .news_center {
    height: 600px;
    background-color: #ffffff;
  }
  .news_center_continer {
    margin: 0 auto;
  }
  .news_center_item img {
    width: 350px;
    height: 262px;
  }
  .news_center_continer {
    margin-top: 58px;
    display: flex;
    justify-content: space-between;
  }
  .news_center_item {
    width: 350px;
  }
  .news_center_item div {
    text-align: left;
  }
  .news_center_item h5 {
    text-align: left;
    font-size: 16px;
    line-height: 16px;
    margin-top: 16px;
    color: black;
  }
  .news_center_item div {
    font-size: 12px;
    color: #666666;
    margin-top: 5px;
  }
  .news_center_item h5:hover {
    color: #f6ab4a;
  }
</style>
